<template>
  <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="router.back()">
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div>
      <router-view />
    </div>
    <van-tabbar route>
      <van-tabbar-item v-for="item in visibleRoutes" :key="item.name" :to="item.path" :icon="item.icon">
        {{ item.title }}
      </van-tabbar-item>
    </van-tabbar>
  </van-pull-refresh>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import routes from '@/router/routes'
import { showToast } from 'vant'
import checkAccess from '@/access/checkAccess'
import { useUserStore } from '@/store/userStore'

const router = useRouter()
const userStore = useUserStore()

const DEFAULT_TITLE = '项目名称'
let title = ref(DEFAULT_TITLE)

let visibleRoutes = computed(() => {
  return routes.filter((item, index) => {
    if (item.meta) {
      if (item.meta.hideInMenu) {
        return false
      }
      //根据权限过滤菜单
      if (!checkAccess(userStore.loginUser, item.meta.access)) {
        return false
      }
    }
    return true
  })
})

// 刷新
let count = ref(0)
const loading = ref(false)

const onRefresh = () => {
  setTimeout(() => {
    showToast('刷新成功')
    loading.value = false
    count.value++
  }, 1000)
  console.log(count.value)
}
</script>

<style scoped></style>
